<template>
	<!-- 用户登陆 -->
	<div>
		<theader title="用户登陆"></theader>

		<div class="loginform">
			<el-row>
				<div>
					<img src="../assets/images/bb.png">
				</div>
			</el-row>

			<el-input v-model="user.username" placeholder="请输入用户名"></el-input>
			

			<el-input v-model="user.pwd" placeholder="请输入密码"></el-input>
			
			<div v-if="isError">
				<p style="color:red">用户名或者密码错误，请重新输入</p>
			</div>
			<el-button native-type="button" type="warning" size="medium" style="width: 100%" @click="dologin(user)">登陆</el-button>
		</div>
	</div>

</template>


<script>
	import theader from '@/components/Header.vue'

	export default {
		name:'userlogin',
		components:{theader},
		data(){
			return {
				user:{
					username:'',
					pwd:''
				},
				isError:false
			}
		},
		methods:{
			dologin(uaser){
				console.log(user);
				var me = this;
				this.axios.get('../../static/json/user.json').then(res=>{
					for(var i=0;i<res.data.length;i++){
						if(res.data[i].username==user.username &&res.data[i].password == user.pwd){
							console.log(res.data[i]);
							this.$store.commit('login',user.username);
							this.$router.push({path:'/user/center'});
							break;
						}else{
							this.isError = true;
						}
					}
				})
			}
		}
	}
</script>


<style>
	.loginform{
		margin-top: 100px;
	}
	.el-input{
		margin-bottom:20px;
	}

</style>